

<template>
    <a-table 
        class="ant-table-striped"
        style="width: 400px" 
        :dataSource="dataSource" 
        :columns="columns" 
        :row-class-name="(item:any, index:number) => (index === 0 ? 'table-first-tr' : null)"
    />
    <a-steps :current="1" style="width: 400px">
        <a-step title="申请"></a-step>
        <a-step title="处理" />
        <a-step title="结束"/>
    </a-steps>
</template>
    
<script setup lang='ts'>
import { onMounted, ref } from "vue";
import json from './data.json'
import logo from '@/assets/logo.png'
const dataSource:any = ref([]);
const init = ()=>{
    const data = json.dataSource;
    dataSource.value = data;
}
onMounted(()=>{
    init();
})
const columns = [
    {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
    },
]
</script>
    
<style scoped>
.ant-table-striped :deep(.table-first-tr) td {
  background-color: #2fdfec;
}
</style>